<template>
	<view class="result">
	<!-- #ifdef MP-WEIXIN -->
	<view class="nav_tab" :style="{ paddingTop: statusHeight+'px',}">
		<view class="search_back" slot="left"><uni-icons type="arrowleft" size="22"></uni-icons></view>
		<view class="search_input">
			<input type="text" value="" placeholder="搜索药品、药店、症状" placeholder-class="input_text" />
			<uni-icons type="search" class="search_icon" size="18" color="#C0C0C0"></uni-icons>
		</view>
	</view>
	<!-- #endif -->
		<view class="result_nav">
			<view class="nav_list" v-for="(item, index) in navlist" :key="item.id" @tap="changeAct(item)">
				<view :class="[index == 1 ? 'nav_sty' : '']">{{ item.name }}</view>
			</view>
		</view>
		<view class="result_contion" v-if="checkStatus">
			<view class="result_con" v-for="(item, index) in contionlist" :key="item.id">
				<view class="con_top">
					<view class="con_img"><image :src="item.image" mode=""></image></view>
					<view :class="[item.status == false ? 'result_sty con_contion' : 'con_contion']">
						<view class="con_name">
							<text>{{ item.ypname }}</text>
						</view>
						<view class="con_guige">
							<text>{{ item.guige }}</text>
						</view>
						<view class="">
							<text class="con_page">
								<text class="text1">￥</text>
								{{ item.jiage }}
							</text>
							<text class="text_moushou">月售{{ item.mouShou }}</text>
						</view>
					</view>
				</view>
				<view class="con_bottom">
					<view class="bot_img"><image :src="item.icon" mode=""></image></view>
					<view class="bot_con">
						<view class="bot_con_top">
							<text :class="[item.status == false ? 'result_sty' : '']">{{ item.yfname }}</text>
							<text :class="[item.status == false ? 'result_sty bot_address' : 'bot_address']">({{ item.address }})</text>
							<uni-tag v-if="!item.status" disabled="true" text="未营业" type="success" inverted="true"></uni-tag>
						</view>
						<view :class="[item.status == false ? 'result_sty bot_con_bot' : 'bot_con_bot']">
							<uni-icons type="heart-filled" size="14" color="#FF5F42"></uni-icons>
							<text style="color: #FF5F42; font-size: 14px;font-weight: 500;">{{ item.pingf }}</text>
							<text class="bot_text">起送{{ item.peisong }}</text>
							<text class="bot_text">距您{{ item.juli }}m</text>
							<text class="bot_text">{{ item.time }}分钟</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 店铺搜索 -->
		<view class="result_shop" v-else>
			<view class="shop_con" v-for="(item, index) in shoplist" :key="item.id">
				<view class="shop_top">
					<view class="shop_img"><image :src="item.icon" mode=""></image></view>
					<view class="">
						<view class="shop_address">
							<text :class="[item.status == false ? 'result_sty' : '']">{{ item.yfname }}</text>
							<text :class="[item.status == false ? 'result_sty shop_address_text' : '']">({{ item.address }})</text>
							<uni-tag v-if="!item.status" disabled="true" text="未营业" type="success" inverted="true"></uni-tag>
						</view>
						<view :class="[item.status == false ? 'result_sty' : '']">
							<uni-icons type="heart-filled" size="16" color="#FF5F42"></uni-icons>
							<text style="color: #FF5F42; font-size: 16px;font-weight: 500;">{{ item.pingf }}</text>
							<text class="shop_moushou">月售{{ item.moushuo }}+</text>
						</view>
						<view :class="[item.status == false ? 'result_sty' : '']">
							<text class="bot_text">起送{{ item.qisong }}</text>
							<text class="bot_text">距您{{ item.juli }}m</text>
							<text class="bot_text">{{ item.time }}分钟</text>
						</view>
					</view>
				</view>
				<view class="shop_bottom">
					<scroll-view scroll-x="true" style="white-space: nowrap;" show-scrollbar="false">
						<view style="display: flex;" :class="[item.status == false ? 'result_sty' : '']">
							<view class="scroll_box" v-for="(item, ids) in shoplist[index].shopnamelist" :key="ids">
								<view class="shop_bot_img"><image :src="item.image" mode="aspectFit"></image></view>
								<view class="">
									<view class="shop_bot_shopname">
										<text>{{ item.shopName }}</text>
									</view>
									<view class="shop_bot_pic">
										<text class="shop_bot_nowpic">￥{{ item.xianj }}</text>
										<uni-tag :text="item.yuanj" type="default" inverted="true" disabled="true">￥</uni-tag>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checkStatus: false,
			statusHeight: null,
			act: '',
			navlist: [
				{
					id: 0,
					name: '销量'
				},
				{
					id: 1,
					name: '距离'
				},
				{
					id: 2,
					name: '价格'
				}
			],
			contionlist: [
				{
					id: 0,
					image: '/static/uni.png',
					ypname: '药品名称药品名称药品名称药品名称药品名称药品名称',
					guige: '药品规格',
					jiage: '12.8',
					mouShou: '12',
					icon: '/static/logo.png',
					yfname: '益丰大药房',
					address: '陆家嘴西路店',
					pingf: '4.9',
					peisong: '￥20',
					juli: '600',
					time: '40',
					status: true
				},
				{
					id: 1,
					image: '/static/uni.png',
					ypname: '药品名称药品名称药品名称药品名称药品名称药品名称',
					guige: '药品规格',
					jiage: '12.8',
					mouShou: '12',
					icon: '/static/logo.png',
					yfname: '益丰大药房',
					address: '陆家嘴西路店',
					pingf: '4.9',
					peisong: '￥20',
					juli: '600',
					time: '40',
					status: true
				},
				{
					id: 2,
					image: '/static/uni.png',
					ypname: '药品名称药品名称药品名称药品名称药品名称药品名称',
					guige: '药品规格',
					jiage: '12.8',
					mouShou: '12',
					icon: '/static/logo.png',
					yfname: '益丰大药房',
					address: '陆家嘴西路店',
					pingf: '4.9',
					peisong: '￥20',
					juli: '600',
					time: '40',
					status: false
				}
			],
			shoplist: [
				{
					id: 0,
					status: true,
					icon: '/static/uni.png',
					yfname: '华式大药房',
					address: '陆家嘴店',
					pingf: '4.9',
					moushuo: 500,
					qisong: 20,
					juli: 600,
					time: 40,
					shopnamelist: [
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.8
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						}
					]
				},
				{
					id: 1,
					status: false,
					icon: '/static/uni.png',
					yfname: '益丰大药房',
					address: '陆家嘴店',
					pingf: '4.9',
					moushuo: 500,
					qisong: 20,
					juli: 600,
					time: 40,
					shopnamelist: [
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 11
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 18
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 15
						},
						{
							image: '/static/logo.png',
							shopName: '商品名称名称',
							yuanj: 22,
							xianj: 10.9
						}
					]
				}
			]
		};
	},
	onLoad() {
		this.getStatusHeight();
	},
	methods: {
		getStatusHeight() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusHeight = res.statusBarHeight;
				}
			});
		},
		changeAct(item) {
			console.log(item.name);
		}
	}
};
</script>

<style lang="scss" scoped>
.result {
	background-color: #F9FAF9;
	height: 100vh;
	padding: 0px 30rpx;
	padding-top: 30rpx;
}
.nav_tab {
	background-color: #ffffff;
	display: flex;
	align-items: center;
	padding-bottom: 4px;
}
.search_input {
	width: 60%;
	position: relative;
}
input {
	height: 72rpx;
	border: 1px solid #e5e5e5;
	border-radius: 20rpx;
	padding-left: 60rpx !important;
}
/deep/ .search_back {
	margin: 0px 14rpx;
}
/deep/ .search_icon {
	position: absolute;
	top: 23%;
	left: 4%;
}
/deep/ .input_text {
	font-size: 28rpx;
	opacity: 0.89;
	font-weight: 400;
}
.result_nav {
	display: flex;
	margin-top: 126rpx;
	background-color: #f9faf9 100%;
	padding: 0px 15px;
	.nav_list {
		font-size: 13px;
		color: #333333;
	}
	.nav_sty {
		margin: 0px 15px;
	}
}
.result_contion,
.result_shop {
	padding-top: 15px;
	.result_con,
	.shop_con {
		padding: 15px 0px 15px 15px;
		margin-bottom: 12px;
		background-color: #ffffff;
		border-radius: 10px;
		.con_top {
			display: flex;
			.con_img {
				margin-right: 10px;
				image {
					width: 160rpx;
					height: 160rpx;
				}
			}
			.con_contion {
				.con_name {
					width: 230px;
					overflow: hidden;
					word-break: break-all;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					font-size: 28rpx;
					color: #333333;
					font-weight: 500;
				}
				.con_guige {
					font-size: 22rpx;
					color: #999999;
					font-weight: 500;
					line-height: 20px;
				}
				.con_page {
					color: #ff5f42;
					line-height: 24px;
					.text1 {
						font-size: 12px;
					}
				}
				.text_moushou {
					font-size: 8rpx;
					color: #666666;
					margin-left: 17px;
					opacity: 0.7;
				}
			}
		}
		.con_bottom {
			display: flex;
			margin-top: 20px;
			.bot_img {
				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
			.bot_con {
				margin-left: 10px;
				.bot_con_top {
					font-size: 26rpx;
					color: #333333;
					font-weight: 500;
				}
				.bot_address {
					margin-left: 15px;
					letter-spacing: 1.5px;
				}
				.bot_con_bot {
				}
			}
		}
	}
}
.bot_text {
	font-size: 22rpx;
	color: #666666;
	margin-right: 10px;
	opacity: 0.75;
}
.result_sty {
	color: #c0c0c0;
	opacity: 0.5;
}
/deep/ .uni-tag {
	padding: 0px 5px !important;
	line-height: 20px !important;
	border-radius: 10px;
	opacity: 1 !important;
	margin-left: 20rpx;
}
.shop_con {
	.shop_top {
		display: flex;
		margin-bottom: 20px;
		.shop_img {
			margin-right: 10px;
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
		.shop_address {
			font-size: 32rpx;
			font-weight: 500;
			.shop_address_text {
				margin-left: 10px;
				letter-spacing: 1.5px;
			}
			/deep/ .uni-tag {
				font-size: 26rpx !important;
				opacity: 1 !important;
				line-height: 22px;
				border-radius: 20rpx;
			}
		}
		.shop_moushou {
			font-size: 8rpx;
			color: #666666;
			margin-left: 10px;
			opacity: 0.7;
		}
	}
	.shop_bottom {
		.shop_bot_img {
			width: 160rpx;
			height: 140rpx;
			padding: 5px 0px;
			margin-bottom: 14rpx;
			opacity: 1 !important;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.scroll_box {
			margin-right: 22px;
			.shop_bot_shopname {
				font-size: 26rpx;
				color: #666666;
				font-weight: 500;
			}
			.shop_bot_pic {
				.shop_bot_nowpic {
					font-size: 13px;
					color: #ff5f42;
					letter-spacing: 0;
					font-weight: 400;
					margin-right: 10px;
				}
			}
			/deep/ .uni-tag {
				border: 1px solid;
				padding: 0px !important;
				line-height: 0px !important;
				font-size: 26rpx;
			}
		}
	}
}
</style>
